<template>
  <div class="app-container">

    <div class="filter-container">
      <!--<el-input v-model="params.prefix" placeholder="前缀" style="width: 200px;" class="filter-item"
                      @keyup.enter.native="fetchData"/>-->
      <el-input
        v-model="params.name"
        placeholder="库房名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="fetchData"
      />

      <el-button
        class="filter-item"
        style="margin-left: 20px;"
        type="primary"
        icon="el-icon-search"
        @click="fetchData"
      >
        搜索
      </el-button>
      <el-button type="success" icon="el-icon-warning-outline" class="filter-item" @click="resetForm()">重置
      </el-button>

    </div>
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        style="float: left;margin-bottom: 20px;"
        @click="editOrAdd(0)"
      >
        添加
      </el-button>

    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      :header-cell-style="tableHeaderStyle"
    >
      <el-table-column label="序号">
        <template slot-scope="scope">
          {{ scope.row.forId }}
        </template>
      </el-table-column>
      <el-table-column label="库房名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="扫码枪数" align="center">
        <template slot-scope="scope">
          <div class="scanTitle" @click="showScan(scope.row)">{{ scope.row.gunCount }}</div>
        </template>
      </el-table-column>
      <el-table-column label="商品数" align="center">
        <template slot-scope="scope">
          <div class="scanTitle" @click="ewmShowList(scope.row)">{{ scope.row.qrCount }}</div>
        </template>
      </el-table-column>
      <!--  <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==1">有效</span>
                  <span v-if="scope.row.status==0">无效</span>
                </template>
            </el-table-column>-->
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="text" @click="editOrAdd(1,scope.row)">编辑
            </el-button>
            <el-button type="text" @click="deleteDataModel(scope.row.id)">删除
            </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.page"
      :limit.sync="params.pageSize"
      @pagination="fetchData"
    />

    <!--         库房的添加、编辑-->
    <el-dialog
      :title="dialogTitles[dialogIndex]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="idenData"
        label-position="right"
        label-width="80px"
        style="margin-left:50px;margin-right: 50px;margin-top: 30px"
      >
        <el-form-item label="库房名" prop="name">
          <el-input v-model="idenData.name" maxlength="50" show-word-limit />
        </el-form-item>
        <!--   <el-form-item label="状态" prop="productModel">
                    <el-radio v-model="idenData.status" label="1">有效</el-radio>
                    <el-radio v-model="idenData.status" label="0">无效</el-radio>
                </el-form-item>-->

        <el-form-item label="库房备注" prop="introduction">
          <el-input
            v-model="idenData.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </el-dialog>
    <!--         扫码枪的添加、编辑-->
    <el-dialog title="扫码枪信息" :visible.sync="dialogFormGunVisible" :close-on-click-modal="false">

      <el-dialog
        width="50%"
        :title="dialogGunTitle[gunIndex]"
        :visible.sync="innerGunVisible"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-form
          ref="dataGunForm"
          :rules="gunRules"
          :model="gunData"
          label-position="right"
          label-width="120px"
          style="margin-left:50px;margin-right: 50px;margin-top: 30px"
        >
          <el-form-item label="扫码枪名称" prop="name">
            <el-input v-model="gunData.name" maxlength="50" show-word-limit />
          </el-form-item>
          <el-form-item label="状态" prop="productModel">
            <el-radio v-model="gunData.status" label="1">有效</el-radio>
            <el-radio v-model="gunData.status" label="0">无效</el-radio>
          </el-form-item>
          <el-form-item label="类型" prop="productModel">
            <el-radio v-model="gunData.type" label="0">入库</el-radio>
            <el-radio v-model="gunData.type" label="1">出库</el-radio>

          </el-form-item>
          <el-form-item label="设置前缀" prop="prefix" style="margin-bottom: 15px">
            <el-select
              v-model="gunData.prefix"
              class="filter-item"
              placeholder="选择前缀"
              style="width: 100%"
              @change="prefixChange"
            >
              <el-option v-for="(item,index) in gunIdentList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="gunFlag" label="允许添加前缀">
            <img src="../../assets/images/ewmImg/forFix.png" alt="" style="width: 380px">
          </el-form-item>
          <el-form-item v-if="gunFlag" :label="gunData.prefix">
            <img :src="require('../../assets/images/ewmImg/'+gunData.prefix+'.png')" alt="" style="width: 380px">
          </el-form-item>
          <el-form-item>
            <div class="forTips">
              提示：选择前缀后，请按照扫码枪用户手册添加指定前缀，添加成功后该扫码枪方可进行出入库管理。
            </div>

          </el-form-item>
          <el-form-item label="备注" prop="introduction">
            <el-input
              v-model="gunData.remark"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerGunVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="saveGunMsg">
            确定
          </el-button>
        </div>
      </el-dialog>

      <div class="filter-container">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          style="float: left;margin-bottom: 20px;"
          @click="editGunOrAdd(0)"
        >
          添加
        </el-button>

      </div>
      <el-table
        v-loading="gunlistLoading"
        :data="gunList"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        :header-cell-style="tableHeaderStyle"
      >

        <el-table-column label="扫码枪名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="前缀" align="center">
          <template slot-scope="scope">
            {{ scope.row.prefix }}
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status | statusFiller }}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.type | typeFiller }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" @click="editGunOrAdd(1,scope.row)">编辑
              </el-button>
              <el-button type="text" @click="deleteGunModel(scope.row.id)">删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="gunTotal>0"
        :total="gunTotal"
        :page.sync="gunParams.page"
        :limit.sync="gunParams.pageSize"
        @pagination="fetchGunData"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeGunDia()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 二维码的查看-->
    <el-dialog title="商品标识信息" :visible.sync="dialogFormEwmVisible" :close-on-click-modal="false">
      <el-dialog
        width="70%"
        title="详情"
        :visible.sync="showDialogEwmDetails"
        :close-on-click-modal="false"
        append-to-body
        class="detailewmBox"
      >
        <el-form
          ref="dataGunForm"
          :model="ewmDetailsData"
          label-position="right"
          label-width="120px"
          style="margin-left:50px;margin-right: 50px"
        >
          <el-form-item label="前缀:" class="detailItem">
            {{ ewmDetailsData.prefix }}
          </el-form-item>
          <el-form-item label="标识:" class="detailItem">
            {{ ewmDetailsData.handle }}
          </el-form-item>
          <el-form-item label="模板名称:" class="detailItem">
            {{ ewmDetailsData.template }}
          </el-form-item>
          <el-form-item label="详细信息:" class="detailItem">
            <div v-for="item in ewmDetailsData.list" :key="item.value" class="detailBox">
              <div v-if="item.name" class="forNaLeft">{{ item.name }}</div>
              <div v-else class="forName borLeft" style="text-align: left" v-html="item.key">{{ item.key }}</div>

              <div v-if="item.type==1" class="forName borLeft">
                <img v-for="imgItem in item.dataList" :key="imgItem" :src="imgItem" style="max-width: 100%;width: 200px;margin: 10px 10px 10px 0;">
              </div>
              <div v-else class="forName borLeft" v-html="item.value">
                {{ item.value }}
              </div>
              <div style="clear: both" />
            </div>
          </el-form-item>
          <el-form-item>
            <div class="forUpdate" @click="showUpdate(ewmDetailsData)">更新</div>
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="showDialogEwmDetails=false">
                        确定
                    </el-button>
                </div>-->
      </el-dialog>

      <el-table
        v-loading="ewmlistLoading"
        :data="ewmList"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        :header-cell-style="tableHeaderStyle"
        style="margin-top: 30px;"
      >

        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ scope.row.forId }}
          </template>
        </el-table-column>
        <el-table-column label="商品标识">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="最新位置" max-width="160px">
          <template slot-scope="scope">
            {{ scope.row.room }}
          </template>
        </el-table-column>
        <el-table-column label="当前状态" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.status | typeFiller }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="160px">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" @click="editEwmOrAdd(1,scope.row)">详情
              </el-button>
              <el-button type="text" @click="deleteEwmModel(scope.row.id)">删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="ewmTotal>0"
        :total="ewmTotal"
        :page.sync="ewmParams.page"
        :limit.sync="ewmParams.pageSize"
        @pagination="fetchEwmData"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeEwmDia()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailVisible" :append-to-body="true">
      <el-table :data="columns">
        <el-table-column label="中文名称">
          <template slot-scope="scope">
            {{ scope.row.nameCh }}
          </template>
        </el-table-column>
        <el-table-column label="英文名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.nameEn }}
          </template>
        </el-table-column>
        <!--   <el-table-column label="数据类型" align="center">
                       <template slot-scope="scope">
                           {{getTypeString(scope.row.dataType)}}
                       </template>
                   </el-table-column>-->
        <el-table-column label="必填项" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.mandatory==0">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column label="最小长度" align="center">
          <template slot-scope="scope">
            {{ scope.row.minLength }}
          </template>
        </el-table-column>
        <el-table-column label="最大长度" align="center">
          <template slot-scope="scope">
            {{ scope.row.maxLength }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { download, get, post } from '../../utils/request'
import Pagination from '@/components/Pagination'
import { trustPrefixIdList } from '../../api/index'
import { typeMap, statusMap } from '../../utils/constant'

export default {
  name: 'MarkManage',
  components: { Pagination },
  filters: {
    statusFiller(status) {
      return statusMap[status]
    },
    typeFiller(type) {
      return typeMap[type]
    }

  },

  data() {
    return {
      list: null,
      listLoading: true,
      total: 10,
      dialogTitles: ['添加', '编辑'],
      dialogIndex: 0,

      checkedChoose: false,
      dialogFormVisible: false,
      isModify: false,
      idenData: {
        status: '1'
      },
      columns: [],
      detailVisible: false,
      tableHeaderStyle: {
        'background': '#f4f4f4',
        'color': '#000'
      },
      params: {
        page: 1,
        pageSize: 10
      },
      rules: {
        name: [{ required: true, message: '请输入库房名称', trigger: 'blur' }]
      },
      // 标识前缀列表
      idenList: [
        {
          value: '0',
          label: 'A'
        },
        {
          value: '1',
          label: 'B'
        },
        {
          value: '2',
          label: 'C'
        },
        {
          value: '3',
          label: 'D'
        },
        {
          value: '4',
          label: 'E'
        },
        {
          value: '5',
          label: 'F'
        },
        {
          value: '6',
          label: 'G'
        },
        {
          value: '7',
          label: 'H'
        },
        {
          value: '8',
          label: 'I'
        },
        {
          value: '9',
          label: 'J'
        },
        {
          value: '10',
          label: 'K'
        },

        {
          value: '11',
          label: 'L'
        },
        {
          value: '12',
          label: 'M'
        },
        {
          value: '13',
          label: 'N'
        },
        {
          value: '14',
          label: 'O'
        },
        {
          value: '15',
          label: 'P'
        },
        {
          value: '16',
          label: 'Q'
        },
        {
          value: '17',
          label: 'R'
        },
        {
          value: '18',
          label: 'S'
        },
        {
          value: '19',
          label: 'T'
        },
        {
          value: '20',
          label: 'U'
        },
        {
          value: '21',
          label: 'V'
        },
        {
          value: '22',
          label: 'W'
        },
        {
          value: '23',
          label: 'X'
        },
        {
          value: '24',
          label: 'Y'
        },
        {
          value: '25',
          label: 'Z'
        }
      ],
      dataType: [{ type: 1, name: '字符串' }, { type: 2, name: '数字' }], //, {type: 3, name: "图片"}
      mandatoryType: [{ id: 0, name: '是' }, { id: 1, name: '否' }],
      enterpriseDataId: null,

      // 扫码枪管理
      forRoomId: '',
      dialogFormGunVisible: false,
      gunList: [],
      gunParams: {
        page: 1,
        pageSize: 10
      },
      gunIdentList: [],
      gunlistLoading: false,
      gunTotal: 0,
      dialogGunTitle: ['添加', '编辑'],
      gunIndex: 0,
      innerGunVisible: false,
      gunData: {
        status: '1',
        type: '0'
      },
      gunRules: {
        name: [{ required: true, message: '请输入扫码枪名称', trigger: 'blur' }],
        prefix: [{ required: true, message: '请选择扫码枪前缀', trigger: 'change' }]
      },
      gunNums: 0,
      gunFlag: false,

      // 二维码管理
      ewmId: '',
      dialogFormEwmVisible: false,
      ewmList: [],
      ewmParams: {
        page: 1,
        pageSize: 10
      },
      ewmlistLoading: false,
      ewmTotal: 0,
      showDialogEwmDetails: false,
      ewmDetailsData: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showScan(row) {
      console.log(row)
      this.dialogFormGunVisible = true
      this.gunData.roomId = row.id
      this.forRoomId = row.id
      this.gunParams.roomId = row.id
      this.fetchGunData()
    },
    downloadModel(modelId) {
      download('/api/downloadModel.json', { 'dataModelId': modelId })
    },
    fetchData() {
      this.listLoading = true
      get(
        '/api/roomList.json',
        this.params
      ).then(response => {
        // console.log(response);
        this.total = response.total
        response.rows.forEach((item, index) => {
          item.forId = index + 1
        })

        this.list = response.rows
        this.listLoading = false
      })
    },
    fetchPrefix() {
      const self = this
      get(
        '/api/scanGunUsed.json',
      ).then(response => {
        console.log(response)
        self.gunIdentList = self.idenList
        if (response) {
          response.forEach((resItem, indexs) => {
            self.idenList.forEach((item, index) => {
              if (item.label == resItem) {
                console.log(resItem)
                self.gunIdentList.splice(index, 1)
              } else {
              }
            })
          })

          console.log(self.gunIdentList)
        }
      })
    },

    editOrAdd(index, item) {
      if (index == 1) {
        this.idenData = Object.assign({}, item)
        /* if(item.status==0){
                        item.status="0"
                    }else if(item.status==1){
                        item.status="1"
                    }*/
      } else {
        this.isModify = false
        this.columns = []
        this.idenData = {
          status: '1'
        }
      }
      this.dialogIndex = index
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      console.log(item)
    },

    prefixChange(value) {
      var self = this
      self.gunFlag = true
      self.idenList.forEach((item, index) => {
        if (value == item.value) {
          self.gunData.prefix = item.label
          self.gunNums = index
          console.log(index)
        }
      })
      console.log(self.gunData.prefix)
      // console.log(this.idenData.enterpriseDataId);
    },

    save() {
      var self = this
      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (!self.idenData.remark) {
            self.idenData.remark = ' '
          }
          post(
            '/api/editRoom.json',
            self.idenData
          ).then(res => {
            self.$message({
              type: 'success',
              message: self.dialogTitles[this.dialogIndex] + '成功!',
              customClass: 'zZindex'
            })
            this.dialogFormVisible = false
            self.fetchData()
          }).catch((error) => {
            this.dialogFormVisible = true
          })
        }
      })
    },
    detail(id) {
      this.detailVisible = true
    },
    deleteDataModel(id) {
      this.$confirm('此操作将永久删除该库房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post(
          '/api/deleteRoom.json', // 待接的删除
          { id: id }
        ).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
            customClass: 'zZindex'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          customClass: 'zZindex'
        })
      })
    },
    deleteColumn(index) {
      this.columns.splice(index, 1)
    },
    addCloumn() {
      this.columns.push({ mandatory: 1, dataType: 1 })
      //  console.log(this.columns);
    },

    // 根据返回的数字变换为类型
    getTypeString(type) {
      let name = ''
      this.dataType.forEach(item => {
        if (item.type == type) {
          name = item.name
        }
      })
      return name
    },

    // 扫码枪信息
    fetchGunData() {
      this.gunlistLoading = true
      get(
        '/api/scanList.json',
        this.gunParams
      ).then(response => {
        // console.log(response);
        this.gunTotal = response.total
        this.gunList = response.rows
        this.gunlistLoading = false
      })
    },
    closeGunDia() {
      this.dialogFormGunVisible = false
      this.fetchData()
    },

    editGunOrAdd(index, item) {
      this.fetchPrefix()
      console.log(item)
      if (index == 0) {

      } else {
        if (item.status == 0) {
          item.status = '0'
        } else if (item.status == 1) {
          item.status = '1'
        }
        if (item.type == 0) {
          item.type = '0'
        } else if (item.type == 1) {
          item.type = '1'
        }
        this.gunData = Object.assign({}, item)
        this.$set(this.gunData, 'roomId', this.forRoomId)
      }
      this.gunIndex = index
      this.innerGunVisible = true
    },
    saveGunMsg() {
      var self = this
      self.$refs['dataGunForm'].validate((valid) => {
        if (valid) {
          post(
            '/api/editScan.json',
            self.gunData
          ).then(res => {
            self.$message({
              type: 'success',
              message: self.dialogGunTitle[this.gunIndex] + '成功!',
              customClass: 'zZindex'
            })
            this.innerGunVisible = false
            this.fetchGunData()
          }).catch((error) => {
            this.innerGunVisible = true
          })
        }
      })
    },
    deleteGunModel(id) {
      this.$confirm('此操作将永久删除该扫码枪, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post(
          '/api/deleteScan.json', // 待接的删除
          { id: id }
        ).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
            customClass: 'zZindex'
          })
          this.fetchGunData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          customClass: 'zZindex'
        })
      })
    },

    // 获取二维码列表
    ewmShowList(row) {
      console.log(row)
      this.dialogFormEwmVisible = true
      this.ewmParams.roomId = row.id
      this.fetchEwmData()
    },
    fetchEwmData() {
      this.ewmlistLoading = true
      get(
        '/api/codeList.json',
        this.ewmParams
      ).then(response => {
        // console.log(response);
        this.ewmTotal = response.total
        response.rows.forEach((item, index) => {
          item.forId = index + 1
        })
        this.ewmList = response.rows
        this.ewmlistLoading = false
      })
    },
    editEwmOrAdd(index, row) {
      this.showDialogEwmDetails = true
      this.ewmId = row.id
      this.ewmDetails(row.id)
    },
    closeEwmDia() {
      this.dialogFormEwmVisible = false
      this.fetchData()
    },
    ewmDetails(id) {
      get(
        '/api/codeDetail.json',
        { id: id }
      ).then(response => {
        // console.log(response);
        response.list.forEach(item => {
          console.log(item)
          // type 0 正常 1 图片  2url 3标识
          if (item.value) {
            if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
              item.type = 1
              item.dataList = item.value.split(',')
            } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
              item.type = 2
            } else if (item.value.startsWith('86.122.')) {
              item.type = 3
              item.dataList = item.value.split(',')
            } else {
              item.type = 0
            }
          } else {
            item.type = 0
          }
        })
        this.ewmDetailsData = response
      })
    },
    deleteEwmModel(id) {
      this.$confirm('此操作将永久删除该商品标识, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post(
          '/api/deleteCode.json', // 待接的删除
          { id: id }
        ).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
            customClass: 'zZindex'
          })
          this.fetchEwmData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          customClass: 'zZindex'
        })
      })
    },
    showUpdate(data) {
      if (this.ewmId) {
        get(
          '/api/codeUpdate.json',
          { id: this.ewmId }
        ).then(response => {
          console.log(response)
          response.list.forEach(item => {
            console.log(item)
            // type 0 正常 1 图片  2url 3标识
            if (item.value) {
              if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.value)) {
                item.type = 1
                item.dataList = item.value.split(',')
              } else if (/[a-zA-z]+:\/\/[^\s]*/.test(item.value)) {
                item.type = 2
              } else if (item.value.startsWith('86.122.')) {
                item.type = 3
                item.dataList = item.value.split(',')
              } else {
                item.type = 0
              }
            } else {
              item.type = 0
            }
          })
          this.ewmDetailsData = response
        })
      }
    },

    resetForm() {
      this.params = {
        page: 1,
        pageSize: 10
      }
      this.$nextTick(() => {
        this.fetchData()
      })
    }
  }
}
</script>
<style scoped>
    .zZindex {
        z-index:3000 !important;
    }
    /deep/ .el-message .el-message--error {
        z-index: 2999 !important;
    }

    /deep/ .el-dialog {
        position: relative;
        margin: 0 auto 56px;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 65%;
    }

    /deep/ .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
        border: 1px solid #DCDFE6 !important;
        border-color: #DCDFE6 !important;
    }

    /deep/ .el-button--primary:focus, .el-button--primary:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #FFF;
    }

    .app-container {
        background: #fff;
        padding: 20px;
    }

    .filter-container {
        text-align: left;
        margin-bottom: 20px;
    }

    .btnItem {
        background: rgba(0, 0, 0, 0);
        border: none;
    }

    label {
        display: inline-block;
        margin-bottom: 2px;
    }

    @media only screen and (max-width: 1680px) {
        .itemBtn {
            display: block;
            margin: 2px auto;
        }
    }

    /deep/ .el-form-item {
        margin-bottom: 22px;
    }

    /deep/ .el-table {
        width: 100%;
    }

    /deep/ .pagination-container {
        background: #fff;
        padding: 32px 16px;
        width: 96%;
    }

    /deep/ .el-checkbox__label {
        display: inline-block;
        padding-right: 10px;
        line-height: 19px;
        font-size: 16px;
        float: left;
    }

    /deep/ .el-form-item.detailItem {
        margin-bottom: 2px;
    }

    .scanTitle{
        font-size: 14px;
        line-height: 30px;
        display: inline-block;
        color: #000;
        border-bottom: 1px solid #4ca5ff;
        cursor: pointer;
    }
    .forTips{
        color: #e14336;
        line-height: 20px;
    }
    /deep/.el-dialog__body {
        padding: 0 10px 30px 10px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
    .detailBox{
        width: 100%;
        height: auto;
    }
    .detailBox:nth-child(odd){
        background-color: #fff;
        border: 1px solid #eee;
    } .detailBox:nth-child(even){
          border: 1px solid #eee;
      }

    .forNaLeft{
        width: 15%;
        line-height: 25px;
        font-size: 14px;
        text-align: center;
        float: left;
    }
    .forName{
        width: 80%;
        line-height: 25px;
        font-size: 14px;
        text-align: left;
        float: left;
        padding-left: 2%;
    }
    .borLeft{
        border-left: 1px solid #eee;
    }
    .forUpdate{
        width: 50px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        background-color: #00affb;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
    }
    .zZindex {
        z-index: 3000 !important;
    }
</style>

